<template>
  <div>
    <Row>
      <Col :span="16">&nbsp;</Col>
      <Col :span="4">
        <Button v-hasPermission="'addSysDict'" type="primary" style="margin-left: 20px; margin-bottom: 5px" @click="addSysDict">添加数据字典</Button>
      </Col>
    </Row>
    <Card>
      <Table :columns="dictColumns" :data="dictList"></Table>
      <Page :total="total" show-total @on-change="changePage" :page-index="postData.pageIndex" :page-size="postData.pageSize" @on-page-size-change="changePageSize" show-sizer style="margin-top: 10px"
      />
    </Card>
    <!-- 添加数据字典 -->
    <Modal title="添加数据字典" v-model="addDictModal">
      <Form :label-width="100" ref="addDict" :model="addDictData" :rules="addDictRules">
        <FormItem prop="dictName" label="数据字典名称：" >
          <Input v-model="addDictData.dictName" style="width:300px;" placeholder="请输入数据字典名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelAddDict">取消</Button>
        <Button type="primary" @click="addDict">确定</Button>
      </div>
    </Modal>
    <!-- 编辑数据字典 -->
    <Modal title="编辑数据字典" v-model="editDictModal">
      <Form :label-width="80" ref="editDict" :model="editDictData" :rules="editDictRules">
        <FormItem prop="dictName" label="数据字典名称">
          <Input v-model="editDictData.dictName" style="width:300px;" placeholder="请输入数据字典名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelEdit">取消</Button>
        <Button type="primary" @click="editDict">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import http from '@/libs/http';
  export default {
    data() {
      return {
        dictColumns: [
          { title: 'Key', key: 'dictKey', align: 'center', },
          { title: 'Value', key: 'dictValue', align: 'center', },
          { title: '描述', key: 'dictDesc', align: 'center', },
          {
            title: '是否包含详细', key: 'isHasDetail', align: 'center', render: (h, params) => {
              const isHasDetail = params.row.isHasDetail
              return h('div', {}, isHasDetail === 1 ? '是' : '否')
            }
          },
          { title: '创建时间', key: 'createTime', align: 'center', },
          {
            title: '管理', key: 'manager', align: 'center', width: 200, render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.openEditDict(params)
                    }
                  },
                  directives: [
                    { name: 'hasPermission', value: "editSysDict" }
                  ]
                }, '编辑')
              ])
            }
          }
        ],
        dictList: [],
        total: 0,
        postData: {
          pageIndex: 1,
          pageSize: 10
        },
        addDictModal: false,
        addDictData: {
          dictKey: "",
          dictValue: "",
          dictDesc: "",
          id: 1,
          isHasDetail: 0,
          details: [
            {
            detailKey: "",
            detailValue: "",
            dictId: 0,
            id: 1,
            }
          ]
        },
        addDictRules: {
          dictName: [
            { required: true, message: '数据字典名称不能为空', trigger: 'blur' },
            { type: 'string', min: 2, max: 20, message: '数据字典名要求2-20位之间', trigger: 'blur' },
          ]
        },
        editDictModal: false,
        editDictData: {},
        editDictRules: {
          dictName: [
            { required: true, message: '数据字典名称不能为空', trigger: 'blur' },
            { type: 'string', min: 2, max: 20, message: '数据字典名要求2-20位之间', trigger: 'blur' },
          ]
        },
        currDictId: '',
      }
    },
    methods: {
      getDictList(cb) {
        http.get({
          vm: this,
          url: '/manager/dict/list',
          data: this.postData,
          success: res => {
            this.dictList = res.data.list
            this.total = res.data.total
            cb && cb()
          }
        })
      },
      addSysDict() {
        this.$refs['addDict'].resetFields()
        this.addDictModal = true
      },
      addDict() {
        this.$refs['addDict'].validate(valid => {
          if(valid){
            const { dictName } = this.addDictData
            http.post({
              vm: this,
              url: `/manager/dict/add`,
              data: this.addDictData,
              success: res => {
                this.$Message.success('添加成功！')
                this.addDictModal = false
                this.$refs['addDict'].resetFields()
                this.getDictList()
                this.addDictData = { dictName: '' }
              }
            })
          }
        })
      },
      cancelAddDict() {
        this.addDictData = { dictName: '' }
        this.$refs['addDict'].resetFields()
        this.addDictModal = false
      },
      openEditDict(params) {
        this.$refs['editDict'].resetFields()
        this.editDictModal = true
        const row = params.row
        this.editDictData = { dictName: row.dictName, version: row.version, id: row.id }
      },
      editDict() {
        this.$refs['editDict'].validate(valid => {
          if(valid){
            const { dictName } = this.editDictData
            http.post({
              vm: this,
              url: '/manager/dict/edit',
              data: this.editDictData,
              success: res => {
                this.$Message.success('编辑成功!');
                this.editDictModal = false
                this.$refs['editDict'].resetFields()
                this.editDictData = {}
                this.getDictList()
              }
            })
          }
        })
      },
      cancelEdit(){
        this.editDictModal = false
        this.$refs['editDict'].resetFields()
        this.editDictData = {}
      },
      changePage(pageIndex) {
        this.postData.pageIndex = pageIndex
        this.getDictList()
      },
      changePageSize(s) {
        this.postData.pageSize = s
        this.getDictList()
      }
    },
    mounted() {
      this.getDictList()
    }
  }
</script>
